import 'package:flutter/material.dart';

import 'pages/center/center.dart';
import 'pages/home/home.dart';
import 'pages/liveStreaming/liveStreaming.dart';
import 'pages/message/message.dart';
import 'pages/shop/shop.dart';
import 'pages/shop/productDetail.dart';
import 'pages/shop/shopCar.dart';

void main() => runApp(const MyApp());

// 1、定义Map类型的routes
final Map routes = {
  '/': (context) => const HomePage(),
  '/productDetail': (context, {arguments}) =>
      ProductDetailPage(arguments: arguments),
  '/shopCar': (context, {arguments}) => ShopCarPage(arguments: arguments),
};

/// App根Widget
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        // ---- 3.初始化路由，初始化进入的页面
        // initialRoute: "/",
        // // ---- 2.所有的路由统一配置到这里
        // routes: {
        //   '/': (context) => const HomePage(),
        //   '/search': (context) => const ShopPage(),
        //   '/message': (context) => const MessagePage(),
        //   '/shop': (context) => const ShopPage(),
        //   '/center': (context) => const CenterPage(),
        //   '/productDetail': (context) => const ProductDetailPage(),
        // });
        home: MainPage(), // 修改这里
        // 其他页面通过命名路由访问
        onGenerateRoute: (RouteSettings settings) {
// 统一处理
          final String? name = settings.name;
          final Function? pageContentBuilder = routes[name];
          if (pageContentBuilder != null) {
            if (settings.arguments != null) {
              final Route route = MaterialPageRoute(
                  builder: (context) => pageContentBuilder(context,
                      arguments: settings.arguments));
              return route;
            } else {
              final Route route = MaterialPageRoute(
                  builder: (context) => pageContentBuilder(context));
              return route;
            }
          }
          return null;
        });
  }
}

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;

  final List<Widget> _tabPages = const [
    HomePage(),
    LiveStreamingPage(),
    ShopPage(),
    MessagePage(),
    CenterPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: const Text('Tab Demo'),
      // ),
      // 3.在这里通过_currentIndex获取指定的page用于显示
      body: _tabPages[_currentIndex],
      // ------------------- 创建tabbar ---------------------
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // 设置当前选中的tab
        fixedColor: Colors.green, // 设置tab选中的颜色
        iconSize: 25, // 设置图标的大小
        type: BottomNavigationBarType.fixed, // 如果tab大于3个，则需要设置该属性才能显示
        items: const [
          // 设置tabbar按钮
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.live_tv_sharp), label: "直播"),
          BottomNavigationBarItem(icon: Icon(Icons.shop), label: "商城"),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle), label: "我的"),
        ],
        onTap: (index) {
          // 点击tabbar按钮的时候触发
          // 4.当点击tabbar的时候修改_currentIndex，从而让body部分修改指向的页面，实现切换页面
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}
